<!--
 * @description: 推演时间
 * @fileName: time.vue
 * @author: ssr
 * @date: 2022-08-12 09:22:31
 * @version: V1.0.0
!-->
<template>
  <div class="time-container">
    <p>仿真时间：{{ formattedSimulTime }}</p>
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { simulationState } from "@/pinia/stores/index"

const simulStore = simulationState();

// 计算属性，将秒数转换为 HH:MM:SS 格式
const formattedSimulTime = computed(() => {
  const totalSeconds = simulStore.getSimulTime as unknown as number;

  // 如果totalSeconds不是一个有效的有限数字，则返回默认时间
  if (typeof totalSeconds !== 'number' || !isFinite(totalSeconds)) {
    return '00:00:00';
  }

  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = Math.floor(totalSeconds % 60);

  const pad = (num: number) => num.toString().padStart(2, '0');

  return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
});
</script>
<style lang="less">
.time-container {
  width: 250px;
  height: 100px;
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 1000;
  color: white;
  font-size: 16px;
  text-align: center;
}
</style>
